{include file="common/head"/}
<style>
    .statu{
        width: 130px;
    }
    .searchtype{
        width: 150px;
    }
    .handle .layui-unselect .layui-form-select
    {
        color:#fff;
    }
    .handle select{
        color:#fff !important;
    }
   .handle .layui-select-title input{
       color:#fff !important;
       background-color: #177ce3;
       background-repeat: repeat-y;
       background-image: -moz-linear-gradient(left,#29adeb,#177ce3);
       background-image: -webkit-linear-gradient(left,#29adeb,#177ce3);
       background-image: -o-linear-gradient(left,#29adeb,#177ce3);
       background-image: -ms-linear-gradient(left,#29adeb,#177ce3);
       background-image: linear-gradient(left,#29adeb,#177ce3);
       box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16),0 2px 1px 0 rgba(0,0,0,0.12);
       -moz-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16),0 2px 1px 0 rgba(0,0,0,0.12);
       -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16),0 2px 1px 0 rgba(0,0,0,0.12);
       -ms-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16),0 2px 1px 0 rgba(0,0,0,0.12);
       -o-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16),0 2px 1px 0 rgba(0,0,0,0.12);
       border: none;
   }
    .handle .layui-select-title .layui-edge{
        border-top-color:#fff !important;
    }
</style>
<div class="layui-page-header headers">
    <div class="pagewrap">
        <span class="layui-breadcrumb">
          <a href="{:url('index/index')}">首页</a>
          <a href="javascript:;">{$authruleinfo.pid}</a>
          <a><cite>{$authruleinfo.id}</cite></a>
        </span>
        <a href="javascript:location.replace(location.href);" style="float:right" class="layui-btn layui-btn-blue refreshs"><i class="fa fa-history falocation" aria-hidden="true"></i>
        </a>
    </div>
</div>
<div class="layui-row layui-rows">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="demoTable">
                <div class="layui-inline layui-inlines">
                    <input class="layui-input"  id="starttime" placeholder="请选择开始时间">
                </div>
                <div class="layui-inline layui-inlines">
                    <input class="layui-input"  id="endtime" placeholder="请选择结束时间">
                </div>
                <span class="layui-form layui-input-inline box statu">
                    <select name="status" lay-filter="status" id="status">
                        <option value="">状态</option>
                        <option value="1">启用</option>
                        <option value="0">禁止</option>
                    </select>
                </span>
                <span class="layui-form layui-input-inline box searchtype">
                    <select name="type" id="type">
                        <option value="">搜索类型</option>
                        <option value="id">编号</option>
                        <option value="username">用户名</option>
                        <option value="phone">手机号码</option>
                    </select>
                </span>
                <div class="layui-inline layui-inlines">
                    <input class="layui-input" name="key" id="key" placeholder="请输入查询内容">
                </div>
                <button class="layui-btn layui-btns layui-btn-blue" id="search" data-type="reload">
                    <i class="layui-icon" style="color: #fff">&#xe615;</i>搜索
                </button>
                <span class="layui-form layui-input-inline box statu handle">
                    <select lay-filter="sees">
                        <option value="see">查看</option>
                        <option value="1">账号分组</option>
                        <option value="2">禁止</option>
                    </select>
                </span>
                <span class="layui-form layui-input-inline box statu handle">
                    <select lay-filter="handle">
                        <option value="handles">操作</option>
                        <option value="1">添加账号分组</option>
                        <option value="2">禁止</option>
                    </select>
                </span>
                <button  tipsmsg="添加分组" class="layui-btn layui-btns layui-btn-green onmousemovebtns" id="addgroups">
                    <i class="layui-icon"></i>添加分组
                </button>
                <button  tipsmsg="删除" class="layui-btn layui-btns layui-btn-red onmousemovebtns" id="delAll">
                    <i class="layui-icon">&#xe640;</i>删除
                </button>
            </div>
            <table class="layui-table" id="list" lay-filter="list"></table>
        </div>
    </div>
</div>
<div class="headalert" id="accountgroupadd" style="display: none;"><br>
    <form class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">分组名称</label>
            <div class="layui-inline">
                <input type="text" name="name" autocomplete="off" placeholder="请输入分组名称" class="layui-input" lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn layui-btns layui-btn-blue" lay-submit="" lay-filter="accountgroupadd">升级</button>
                <button type="reset" class="layui-btn layui-btns layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
{include file="common/foot"/}
<script type="text/html" id="topBtn">
    <button tipsmsg="添加" class="layui-btn layui-btn layui-btn-blue layui-btn-sm onmousemovebtns"
            onclick="x_admin_show('添加账号','{:url('accountadd')}','500px','420px','95%','95%')">
        <i class="layui-icon"></i>添加
    </button>
</script>
<script type="text/html" id="statu">
    <input type="checkbox" name="statu" lay-skin="switch" lay-text="启用|禁止" value="{{d.id}}" lay-filter="statu" {{ d.statu == 1 ? 'checked' : '' }}>
</script>
<script type="text/html" id="tagname">
    <span>
        <i class="fa fa-bookmark" aria-hidden="true" style="color:#FF6347;font-size: 12px;"></i> {{d.tagname}}
    </span>
</script>
<script type="text/html" id="action" >
    <a tipsmsg="编辑" class="layuimsg" onclick="x_admin_show('编辑平台信息','{:url('platformedit')}?id={{d.id}}','400px','200px','95%','200px')">
        <button class="layui-btn layui-btn-blue layui-btn-xs layui-btns">
            <i class="layui-icon">&#xe642;</i>
        </button>
    </a>
    <a lay-event="del" tipsmsg="删除" class="layuimsg">
        <button class="layui-btn layui-btn-red layui-btn-xs layui-btns">
            <i class="layui-icon">&#xe640;</i>
        </button>
    </a>
</script>
<script>
    layui.use(['table','form','element','laydate'], function() {
        var table = layui.table,form = layui.form,element = layui.element,laydate = layui.laydate, $ = layui.jquery;
        var tableIn = table.render({
            elem: '#list',
            url: '{:url("accountlist")}',
            text:{none: '<i class="fa fa-snowflake-o" aria-hidden="true"></i>&nbsp;暂无相关数据'},
            method: 'post',
            toolbar: '#topBtn',
            title: '账号数据信息',
            // totalRow: true,
            page: true,
            cols: [[
                /* {checkbox:true,width: 80,unresize: true,totalRowText: '合计行'},*/
                //{field: 'ids', title: '编号', width: 120,align: 'center',sort:true},
                {checkbox:true,width: 60},
                {field: 'id', title: '编号', width: 120,align: 'center',sort:true},
                {field: 'username', title: '账号',width:150},
                {field: 'password', title: '密码',width:150},
                {field: 'dgroup', title: '设备组',width:150},
                {field: 'code', title: '特征码',width:150},
                {field: 'codes', title: '设备码',width:200},
              /*  {field: 'tagname', title: '应用标识',width:150},*/
                {field: 'tagname',title: '应用标识',width:150,  toolbar: '#tagname'},
                {field: 'statu',title: '状态',width:100, align: 'center', toolbar: '#statu'},
                {field: 'addtime', title: '添加时间',align: 'center',width:170,sort:true},
                {width: 120,title: '操作', align: 'center', toolbar: '#action',fixed: 'right'}
            ]],
            limit: {$configinfo.limit}, //每页默认显示的数量
            limits:[{$configinfo.limit},100,200,400,600,1000,2000],
            done:function(res){
                /* if(res.name == 1){
                     $(".layui-table-box").find("[data-field='ids']").css("display","none");
                 }*/
                //var nums = $(".layui-table-total").find("[data-field='id'] div").text();
                //console.log(nums);
                //$(".layui-table-total").find("[data-field='id'] div").text(200);
                onmousemoves();
            }
        });

        //查看
        form.on('select(sees)',function (data) {
            console.log(data)
            switch(data.value)
            {
                case '1':
                    opens('查看分组信息','95%','200px','400px', '200px',$("#accountgroupadd").html());
                    form.render();
                    break;
                case '2':
                    alert(99)
                    break;
                default:
                    alert(55)
            }
        })

        //操作
        form.on('select(handle)', function(data) {
            switch(data.value)
            {
                case '1':
                    opens('添加分组','95%','200px','400px', '200px',$("#accountgroupadd").html());
                    form.render();
                    break;
                case '2':
                    alert(99)
                    break;
                default:
                    alert(55)
            }
        })

        //添加分组
        form.on('submit(accountgroupadd)', function(data){
            $.post("{:url('accountgroupadd')}",data.field,function(res){
                if(res.code == 1){
                    layer.msg(res.msg);
                    setTimeout(function(){
                        window.parent.location.reload();//修改成功后刷新父界面
                    }, 1000);
                }else if(res.code === 0) {
                    layer.msg(res.msg);
                }else{
                    layer.msg('你无操作权限！');
                }
            },'json')
            return false;
        });


        //监听单元格编辑
        table.on('edit(list)', function(obj){
            var value = obj.value //得到修改后的值
                ,data = obj.data //得到所在行所有键值
            var arrs ={
                id:data.id,//验证的数据类类型
                name:value//提交的数据
            };
            loading =layer.load(1, {shade: [0.1,'#fff']});
            $.post('{:url("platformedit")}',arrs,function(res){
                layer.close(loading);
                if(res.code===1){
                    layer.msg(res.msg);
                    tableIn.reload();
                }else if(res.code===0){
                    layer.msg(res.msg);
                }else{
                    layer.msg('你无操作权限!')  ;
                }
            },'json')
        });

        //复选框选中的个数
        table.on('checkbox(list)', function () {
            var checkStatus = table.checkStatus('list');
            var data = checkStatus.data;
            layer.msg('选中了：'+ data.length + ' 个');
        });

        laydate.render({
            elem: '#starttime'
            ,theme: '#4476A7'
            ,max: 'new Date()'
        });

        laydate.render({
            elem: '#endtime'
            ,theme: '#4476A7'
            ,max: 1
        });

        form.on('select(status)', function(data){
            tableIn.reload({
                where: {statu: data.value}
            });
        })

        //搜索
        $('#search').on('click', function() {
            var key = $('#key').val();
            var starttime = $("#starttime").val();
            var endtime = $("#endtime").val();
            var t1 = new Date(starttime);
            var t2 = new Date(endtime);
            if((t2 - t1) < 0){
                layer.msg('时间范围选择错误！');
                return false;
            }
            var status = $('#status').val();
            var type = $('#type').val();
            if($.trim(key) != '' && type == 0){
                layer.msg('请选择搜索类型！');
                return false;
            }
            if($.trim(key) == '' && type != 0){
                layer.msg('搜索内容不能为空！');
                return false;
            }
            if($.trim(key) == '' && type == ''  && starttime == "" && endtime == "") {
                layer.msg('搜索内容不能为空！');
                return false;
            }
            tableIn.reload({
                where: {key: key,starttime:starttime,endtime:endtime,statu:status,type:type}
            })
        });

        //修改状态
        form.on('switch(statu)', function(obj){
            var urls = "{:url('accountstatu')}";
            loading =layer.load(1, {shade: [0.1,'#fff']});
            var id = this.value;
            var statu = obj.elem.checked===true?1:0;
            $.post(urls,{'id':id,'statu':statu},function(res) {
                layer.close(loading);
                if(res.code===1){
                    layer.msg(res.msg);
                    tableIn.reload();
                }else if(res.code===0){
                    layer.msg(res.msg);
                }else{
                    layer.msg('你无操作权限！');
                }
            },'json');
        });


        table.on('tool(list)', function(obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('您确定要删除该信息吗？', {icon: 3,skin: 'layui-layer-lan',anim: 4,title:'删除'}, function(index){
                    var loading = layer.load(1, {shade: [0.1, '#fff']});
                    $.post("{:url('accountdel')}",{id:data.id},function(res){
                        layer.close(loading);
                        if(res.code===1){
                            layer.msg(res.msg);
                            tableIn.reload();
                        }else if(res.code === 0) {
                            layer.msg(res.msg);
                        }else{
                            layer.msg('你无操作权限！');
                        }
                    },'json');
                    layer.close(index);
                });
            }
        });

        $('#delAll').click(function(){
            var checkStatus = table.checkStatus('list'); //test即为参数uid设定的值
            var id = [];
            $(checkStatus.data).each(function (i, o) {
                id.push(o.id);
            });
            if (id == ""){
                layer.msg("请选择内容进行删除");
                return false;
            }
            layer.confirm('确认要删除选中信息吗？', {icon: 3,skin: 'layui-layer-lan',anim: 4,title:'删除'}, function(index) {
                layer.close(index);
                var loading = layer.load(1, {shade: [0.1, '#fff']});
                $.post("{:url('accountdel')}", {id: id}, function (data) {
                    layer.close(loading);
                    if (data.code === 1) {
                        layer.msg(data.msg);
                        tableIn.reload();
                    }else if(data.code === 0) {
                        layer.msg(data.msg);
                    }else{
                        layer.msg('你无操作权限！');
                    }
                },'json');
            });
        })
    });
</script>
